
<template>
  <el-form ref="form"   :rules="rules" :model="form" label-width="120px">
    <el-form-item label="讲师名称" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="头衔" prop="level">
      <el-select v-model="form.level" placeholder="请选择头衔">
        <el-option label="高级讲师" value="1"></el-option>
        <el-option label="首席讲师" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="简介" prop="intro">
      <el-input v-model="form.intro" />
    </el-form-item>
    <el-form-item label="头像" prop="avatar">
      <!-- 头衔缩略图 -->
      <pan-thumb :image="image"/>
      <!-- 文件上传按钮 -->
      <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
      </el-button>
      <!--
  v-show：是否显示上传组件
  :key：类似于id，如果一个页面多个图片上传控件，可以做区分
  :url：后台上传的url地址
  @close：关闭上传组件
  @crop-upload-success：上传成功后的回调 -->
      <image-cropper
        v-show="imagecropperShow"
        :width="300"
        :height="300"
        :key="imagecropperKey"
        url="teacher/seaveImg/123"
        lang-type="en"
        field="file"
        @close="close"
        @crop-upload-success="cropSuccess"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit('form')">立即添加</el-button>
      <el-button @click="onCancel">重置</el-button>
    </el-form-item>
  </el-form>
</template>




<style scoped lang="scss">

</style>

<script>

import PanThumb from "@/components/PanThumb/index.vue";
import ImageCropper from "@/components/ImageCropper/index.vue";
import { seave } from '@/api/table'
export default{
  components: { ImageCropper, PanThumb },
 data(){
   return{
     BASE_API: process.env.BASE_API, // 接口API地址
     imagecropperShow: false, // 是否显示上传组件
     imagecropperKey: 0, // 上传组件id
     image:'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191',
     form:{
       name:'',
       level:'',
       intro:'',
       avatar:'',
     },
     rules:{
       name: [
         { required: true, message: '请输入姓名名称', trigger: 'blur' },
       ],
       level:[
         { required: true, message: '请选择头衔名称', trigger: 'blur' },
       ],
       intro:[
         { required: true, message: '请输入简历名称', trigger: 'blur' },
       ],
       avatar:[
         { required: true, message: '请选择头像名称', trigger: 'blur' },
       ],
     },
   }
 },
  created() {

  },
  methods:{
    onCancel(){
      this.form={}
    },
    onSubmit(form){
      this.$refs[form].validate((valid) => {
        if (valid) {
          seave(this.form).then(response=>{
            if (response.code==20000){
              this.$message.success(response.message)
              this.$router.push("/teacher/list")
            }else{
              this.$message.error(response.message)
            }
          })
        }
      });
    },
    cropSuccess(data) {
      console.log(data)
      this.form.avatar=data
      this.imagecropperShow = false
      this.teacher.avatar = data.url
      // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1

    },
    close() {
      this.imagecropperShow = false
      // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    }
  }
}
</script>
